// 监控模块
;(function () {
  $('.monitor .tabs').on('click', 'a', function () {
    $(this).addClass('active').siblings('a').removeClass('active')
    $('.monitor .content').eq($(this).index()).show().siblings('.content').hide()
  })

  // 动画
  $('.marquee-view .marquee').each(function () {
    var rows = $(this).children().clone()
    $(this).append(rows)
  })
})()

// 点位模块
;(function () {
  // 1. 实例化对象
  const myChart = echarts.init(document.querySelector('.pie'))
  // 2. 指定配置项和数据
  const option = {
    // 提示框组件
    tooltip: {
      // trigger 触发方式。  非轴图形，使用item的意思是放到数据对应图形上触发提示
      trigger: 'item',
      backgroundColor: 'rgba(35, 35, 39, .5)',
      textStyle: {
        color: '#fff'
      },
      // 格式化提示内容：
      // a 代表series系列图表名称
      // b 代表series数据名称 data 里面的name
      // c 代表series数据值 data 里面的value
      // d代表  当前数据/总数据的比例
      formatter: '{a} <br/>{b} : {c} ({d}%)'
    },
    // 注意颜色写的位置
    color: ['#006cff', '#60cda0', '#ed8884', '#ff9f7f', '#0096ff', '#9fe6b8', '#32c5e9', '#1d9dff'],
    // 控制图表
    series: [
      {
        // 图表名称
        name: '点位统计',
        // 图表类型
        type: 'pie',
        // 南丁格尔玫瑰图 有两个圆  内圆半径10%  外圆半径70%
        // 饼形图半径。 可以是像素。也可以是百分比（ 基于DOM容器大小）第一项是内半径，第二项是外半径（通过它可以实现饼形图大小）
        radius: ['10%', '70%'],
        // 图表中心位置 left 50%  top 50%  距离图表DOM容器
        center: ['50%', '50%'],
        // radius 半径模式，另外一种是 area 面积模式
        roseType: 'radius',

        // 数据集 value 数据的值 name 数据的名称
        data: [
          { value: 20, name: '云南' },
          { value: 26, name: '北京' },
          { value: 24, name: '山东' },
          { value: 25, name: '河北' },
          { value: 20, name: '江苏' },
          { value: 25, name: '浙江' },
          { value: 30, name: '四川' },
          { value: 42, name: '湖北' }
        ],
        // 文本标签控制饼形图文字的相关样式， 注意它是一个对象
        label: {
          fontSize: 10,
          color: 'inherit'
        },
        // 引导线调整
        labelLine: {
          // 连接扇形图线长
          length: 6,
          // 连接文字线长
          length2: 8
        }
      }
    ]
  }

  // 3. 配置项和数据给我们的实例化对象
  myChart.setOption(option)
  // 4. 当我们浏览器缩放的时候，图表也等比例缩放
  window.addEventListener('resize', function () {
    // 让我们的图表调用 resize这个方法
    myChart.resize()
  })
})()

// 用户模块
;(function () {
  const myChart = echarts.init(document.querySelector('.bar'))
  // 中间省略的数据  准备三项
  var item = {
    name: '',
    value: 1200,
    // 柱子颜色
    itemStyle: {
      color: '#254065'
    },
    // 鼠标经过柱子颜色
    emphasis: {
      itemStyle: {
        color: '#254065'
      }
    },
    // 工具提示隐藏
    tooltip: {
      extraCssText: 'opacity:0'
    }
  }
  const option = {
    tooltip: {
      trigger: 'item', // 鼠标放到柱子上触发
      backgroundColor: 'rgba(35, 35, 39, .5)',
      textStyle: {
        color: '#fff'
      },
      formatter: function (params) {
        // 添加蓝色小圆点
        var dot =
          '<span style="display:inline-block;margin-right:8px;border-radius:50%;width:8px;height:8px;background-color:#00fffb;"></span>'
        return params.seriesName + '<br/>' + dot + params.name + ': ' + params.value
      }
    },
    // 直角坐标系内绘图网格（区域）
    grid: {
      top: '3%',
      right: '3%',
      bottom: '3%',
      left: '0%',
      //  图表位置紧贴画布边缘是否显示刻度以及label文字 防止坐标轴标签溢出跟grid 区域有关系
      containLabel: true,
      // 是否显示直角坐标系网格
      show: true,
      //grid 四条边框的颜色
      borderColor: 'rgba(0, 240, 255, 0.3)'
    },
    // 修改线性渐变色方式 1
    color: new echarts.graphic.LinearGradient(
      // (x1,y2) 点到点 (x2,y2) 之间进行渐变
      0,
      0,
      0,
      1,
      [
        { offset: 0, color: '#00fffb' }, // 0 起始颜色
        { offset: 1, color: '#0061ce' } // 1 结束颜色
      ]
    ),
    xAxis: {
      type: 'category',
      // 刻度设置
      axisTick: {
        // true意思：图形和刻度居中中间
        // false意思：图形在刻度之间
        alignWithLabel: false,
        // 不显示刻度
        show: false
      },
      // x坐标轴文字标签样式设置
      axisLabel: {
        color: '#4c9bfd'
      },
      // x坐标轴颜色设置
      axisLine: {
        lineStyle: {
          color: 'rgba(0, 240, 255, 0.3)'
          // width:8,  x轴线的粗细
          // opcity: 0,   如果不想显示x轴线 则改为 0
        }
      },
      data: [
        '上海',
        '广州',
        '北京',
        '深圳',
        '合肥',
        '',
        '......',
        '',
        '杭州',
        '厦门',
        '济南',
        '成都',
        '重庆'
      ]
    },
    yAxis: {
      // 刻度设置
      axisTick: {
        // 不显示刻度
        show: false
      },
      // y坐标轴文字标签样式设置
      axisLabel: {
        color: '#4c9bfd'
      },
      // y坐标轴颜色设置
      axisLine: {
        lineStyle: {
          color: 'rgba(0, 240, 255, 0.3)'
          // width:8,  x轴线的粗细
          // opcity: 0,   如果不想显示x轴线 则改为 0
        }
      },
      // y轴 分割线的样式
      splitLine: {
        lineStyle: {
          color: 'rgba(0, 240, 255, 0.3)'
        }
      }
    },
    series: [
      {
        name: '用户统计',
        type: 'bar',
        // series配置data选项在中使用
        data: [2100, 1900, 1700, 1560, 1400, item, item, item, 900, 750, 600, 480, 240]
      }
    ]
  }
  myChart.setOption(option)
  // 4. 当我们浏览器缩放的时候，图表也等比例缩放
  window.addEventListener('resize', function () {
    // 让我们的图表调用 resize这个方法
    myChart.resize()
  })
})()

// 订单区域
;(function () {
  // 1. 准备数据
  const data = {
    // 365天
    '365天': {
      orderNum: 20301987,
      salesNum: 99834
    },
    // 90天
    '90天': {
      orderNum: 10150993,
      salesNum: 49917
    },
    // 30天
    '30天': {
      orderNum: 3450624,
      salesNum: 17253
    },
    // 24小时
    '24小时': {
      orderNum: 1200000,
      salesNum: 60000
    }
  }
  // 2. 点击tab添加active类名
  $('.filter').on('click', 'a', function () {
    $(this).addClass('active').siblings('a').removeClass('active')
    // 3. 获取当前点击的时间
    const time = $(this)[0].innerText
    // 获取显示 订单数量 容器
    let $h4Orders = $('.order h4:eq(0)')
    // 获取显示 金额数量 容器
    let $h4Amount = $('.order h4:eq(1)')
    // 4. 切换数据
    $h4Orders.text(data[time].orderNum)
    $h4Amount.text(data[time].salesNum)

    // 6. 点击tab切换数据时,更换索引
    index = $(this).index()
  })
  // 5. 开启定时器切换数据
  let index = 0
  let timer = setInterval(() => {
    index++
    if (index >= $('.filter a').length) {
      index = 0
    }
    $('.filter a').eq(index).click()
  }, 5000)

  // 7. 鼠标悬停关闭定时器
  $('.order').hover(
    () => {
      clearInterval(timer)
    },
    () => {
      timer = setInterval(() => {
        index++
        if (index >= $('.filter a').length) {
          index = 0
        }
        $('.filter a').eq(index).click()
      }, 5000)
    }
  )
})()

// 销售区域模块
;(function () {
  const myChart = echarts.init(document.querySelector('.sales .line'))
  const option = {
    tooltip: {
      trigger: 'axis',
      backgroundColor: 'rgba(35, 35, 39, .7)',
      textStyle: {
        color: '#fff'
      }
    },
    // 图例组件
    legend: {
      textStyle: {
        color: '#4c9bfd' // 图例文字颜色
      },
      right: '10%', // 距离右边10%
      top: '%' // 距离顶部10%
    },
    // 设置网格样式
    grid: {
      top: '20%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      show: true, // 显示边框
      borderColor: '#012f4a', // 边框颜色
      containLabel: true // 包含刻度文字在内
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      // 刻度设置
      axisTick: {
        // 不显示刻度
        show: false
      },
      axisLabel: {
        color: '#4c9bfd' // 文字颜色
      },
      axisLine: {
        lineStyle: {
          color: '#012f4a'
        }
      },
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
    },
    yAxis: {
      type: 'value',
      axisTick: {
        show: false // 去除刻度
      },
      axisLabel: {
        color: '#4c9bfd' // 文字颜色
      },
      axisLine: {
        lineStyle: {
          color: '#012f4a'
        }
      },
      // y轴 分割线的样式
      splitLine: {
        lineStyle: {
          color: '#012f4a'
        }
      }
    },
    color: ['#00f2f1', '#ed3f35'],
    // 图标数据
    series: [
      {
        name: '预期销售额',
        data: [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
        type: 'line',
        smooth: true
      },
      {
        name: '实际销售额',
        data: [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79],
        type: 'line',
        smooth: true
      }
    ]
  }

  // 准备数据
  const data = {
    year: [
      [24, 40, 101, 134, 90, 230, 210, 230, 120, 230, 210, 120],
      [40, 64, 191, 324, 290, 330, 310, 213, 180, 200, 180, 79]
    ],
    quarter: [
      [23, 75, 12, 97, 21, 67, 98, 21, 43, 64, 76, 38],
      [43, 31, 65, 23, 78, 21, 82, 64, 43, 60, 19, 34]
    ],
    month: [
      [34, 87, 32, 76, 98, 12, 32, 87, 39, 36, 29, 36],
      [56, 43, 98, 21, 56, 87, 43, 12, 43, 54, 12, 98]
    ],
    week: [
      [43, 73, 62, 54, 91, 54, 84, 43, 86, 43, 54, 53],
      [32, 54, 34, 87, 32, 45, 62, 68, 93, 54, 54, 24]
    ]
  }
  // 点击tab切换样式
  $('.sales .caption').on('click', 'a', function () {
    $(this).addClass('active').siblings('a').removeClass('active')
    // 清除定时器，重新启动定时器
    index = $(this).index() - 1 // 由于a前面还有一个h4标签，所以这里index()从1开始的
    // 切换数据
    let currentData = null
    switch ($(this)[0].innerText) {
      case '年':
        currentData = data.year
        break
      case '季':
        currentData = data.quarter
        break
      case '月':
        currentData = data.month
        break
      case '周':
        currentData = data.week
        break
    }
    option.series[0].data = currentData[0]
    option.series[1].data = currentData[1]
    // 重新设置数据  让图表重新渲染
    myChart.setOption(option)
  })
  // 开启定时器
  let index = 0
  const switchTabs = () => {
    index++
    if (index >= $('.sales .caption a').length) {
      index = 0
    }
    $('.sales .caption a').eq(index).click()
  }
  let timer = setInterval(switchTabs, 1000)

  // 鼠标悬浮关闭定时器
  $('.sales').hover(
    () => {
      clearInterval(timer)
    },
    () => {
      timer = setInterval(switchTabs, 1000)
    }
  )
  myChart.setOption(option)
  // 当我们浏览器缩放的时候，图表也等比例缩放
  window.addEventListener('resize', function () {
    // 让我们的图表调用 resize这个方法
    myChart.resize()
  })
})()
// 渠道 季度模块
;(function () {
  // 雷达图
  const myChart = echarts.init(document.querySelector('.channel .radar'))
  const option = {
    tooltip: {
      show: true,
      // 控制提示框组件的显示位置
      position: ['40%', '0%'],
      backgroundColor: 'rgba(35, 35, 39, .7)',
      textStyle: {
        color: '#fff',
        fontSize: 12
      },
      formatter: function (params) {
        let indicator = [
          { name: '机场' },
          { name: '商场' },
          { name: '火车站' },
          { name: '汽车站' },
          { name: '地铁' }
        ]
        indicator = indicator.map((item, index) => {
          return {
            ...item,
            value: params.value[index]
          }
        })
        const data = indicator.map((item) => item.name + ': ' + item.value)
        return params.seriesName + '<br/>' + data.join('<br/>')
      }
    },
    radar: [
      {
        indicator: [
          { name: '机场', max: 100 },
          { name: '商场', max: 100 },
          { name: '火车站', max: 100 },
          { name: '汽车站', max: 100 },
          { name: '地铁', max: 100 }
        ],
        center: ['50%', '50%'],
        // 外半径占据容器大小
        radius: '55%',
        startAngle: 90,
        // 指示器轴的分割段数
        splitNumber: 4,
        shape: 'circle',
        axisName: {
          // 修饰雷达图文本颜色
          color: '#4c9bfd'
        },
        splitArea: {
          show: false
        },
        // 坐标轴在 grid 区域中的分隔线（圆圈）
        splitLine: {
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.5)'
            // width: 2,
            // type: 'dashed'
          }
        },
        // 坐标轴轴线相关设置(竖线)axisLine
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255, 255, 255, 0.5)'
            // width: 1,
            // type: 'solid'
          }
        }
      }
    ],
    series: [
      {
        name: '北京',
        type: 'radar',
        // 填充区域的线条颜色
        lineStyle: {
          normal: {
            color: '#fff',
            width: 1,
            opacity: 0.5
          }
        },
        data: [[90, 19, 56, 11, 34]],
        // 设置图形标记 （拐点）
        symbol: 'circle',
        // 这个是设置小圆点大小
        symbolSize: 5,
        // 设置小圆点颜色
        itemStyle: {
          color: '#fff'
        },
        // 让小圆点显示数据
        label: {
          show: true,
          fontSize: 10
        },
        // 修饰我们区域填充的背景颜色
        areaStyle: {
          color: 'rgba(238, 197, 102, 0.6)'
        }
      }
    ]
  }
  myChart.setOption(option)

  // 仪表盘
  const myChart2 = echarts.init(document.querySelector('.quarter .gauge'))
  const option2 = {
    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: '#00c9e0' }, // 0 起始颜色
      { offset: 1, color: '#005fc1' } // 1 结束颜色
    ]),
    series: [
      {
        type: 'gauge',
        progress: {
          show: true,
          width: 10
        },
        axisLine: {
          lineStyle: {
            width: 10,
            color: [[1, '#12274d']]
          }
        },
        radius: '161%',
        center: ['50%', '80%'],
        startAngle: 180,
        endAngle: 0,
        splitLine: {
          show: false
        },
        axisLabel: {
          show: false
        },
        axisTick: {
          show: false
        },
        pointer: {
          show: false
        },
        detail: {
          valueAnimation: true,
          fontSize: 0,
          offsetCenter: [0, '-25%']
        },
        data: [
          {
            value: 50
          }
        ]
      }
    ]
  }
  myChart2.setOption(option2)
  // 当我们浏览器缩放的时候，图表也等比例缩放
  window.addEventListener('resize', function () {
    // 让我们的图表调用 resize这个方法
    myChart.resize()
    myChart2.resize()
  })
})()

// 各省热销模块
;(function () {
  // 准备数据
  const hotData = [
    {
      city: '北京', // 城市
      sales: '25, 179', // 销售额
      flag: true, //  上升还是下降
      brands: [
        //  品牌种类数据
        { name: '可爱多', num: '9,086', flag: true },
        { name: '娃哈哈', num: '8,341', flag: true },
        { name: '喜之郎', num: '7,407', flag: false },
        { name: '八喜', num: '6,080', flag: false },
        { name: '小洋人', num: '6,724', flag: false },
        { name: '好多鱼', num: '2,170', flag: true }
      ]
    },
    {
      city: '河北',
      sales: '23,252',
      flag: false,
      brands: [
        { name: '可爱多', num: '3,457', flag: false },
        { name: '娃哈哈', num: '2,124', flag: true },
        { name: '喜之郎', num: '8,907', flag: false },
        { name: '八喜', num: '6,080', flag: true },
        { name: '小洋人', num: '1,724', flag: false },
        { name: '好多鱼', num: '1,170', flag: false }
      ]
    },
    {
      city: '上海',
      sales: '20,760',
      flag: true,
      brands: [
        { name: '可爱多', num: '2,345', flag: true },
        { name: '娃哈哈', num: '7,109', flag: true },
        { name: '喜之郎', num: '3,701', flag: false },
        { name: '八喜', num: '6,080', flag: false },
        { name: '小洋人', num: '2,724', flag: false },
        { name: '好多鱼', num: '2,998', flag: true }
      ]
    },
    {
      city: '江苏',
      sales: '23,252',
      flag: false,
      brands: [
        { name: '可爱多', num: '2,156', flag: false },
        { name: '娃哈哈', num: '2,456', flag: true },
        { name: '喜之郎', num: '9,737', flag: true },
        { name: '八喜', num: '2,080', flag: true },
        { name: '小洋人', num: '8,724', flag: true },
        { name: '好多鱼', num: '1,770', flag: false }
      ]
    },
    {
      city: '山东',
      sales: '20,760',
      flag: true,
      brands: [
        { name: '可爱多', num: '9,567', flag: true },
        { name: '娃哈哈', num: '2,345', flag: false },
        { name: '喜之郎', num: '9,037', flag: false },
        { name: '八喜', num: '1,080', flag: true },
        { name: '小洋人', num: '4,724', flag: false },
        { name: '好多鱼', num: '9,999', flag: true }
      ]
    }
  ]
  let index = 0
  // 封装渲染函数
  const render = (index) => {
    $(`.province .sup li`).eq(index).addClass('active').siblings('li').removeClass('active')
    // 切换数据
    const currentData = hotData[index]
    let lis = currentData.brands.map((item) => {
      return `<li><span>${item.name}</span><span> ${
        item.flag ? '<s class="icon-up"></s>' : '<s class="icon-down"></s>'
      }${item.num}</span></li>`
    })
    // 渲染数据
    $('.province .sub').html(lis.join(''))
  }
  $('.province .sup').on('mouseenter', 'li', function () {
    render($(this).index())
    // 将index置为当前索引
    index = $(this).index()
  })
  // 默认经过第一项
  $('.province .sup li').eq(0).trigger('mouseenter')
  // 开启定时器
  let timer = setInterval(() => {
    index++
    if (index >= $('.province .sup li').length) {
      index = 0
    }
    render(index)
  }, 2000)
  // 鼠标经过清除定时器
  $('.province .sup').hover(
    () => {
      clearInterval(timer)
    },
    () => {
      timer = setInterval(() => {
        index++
        if (index >= $('.province .sup li').length) {
          index = 0
        }
        render(index)
      }, 2000)
    }
  )
})()
